import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button, Form, Input, InputNumber, Radio } from 'antd'

class EditUserInfoForm extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    }

    const tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    }

    return (
      <Form
        {...layout}
        name="userinfo"
        initialValues={{ gender: 0 }}
        onFinish={this.props.handleFinish}
      >
        <Form.Item label="姓名" name="name" rules={[{ type: 'string' }, { required: true }]}>
          <Input/>
        </Form.Item>
        <Form.Item label="年龄" name="age" rules={[{ type: 'number' }, { required: true }]}>
          <InputNumber/>
        </Form.Item>
        <Form.Item label="性别" name="gender" rules={[{ type: 'number' }, { required: true }]}>
          <Radio.Group defaultValue={0}>
            <Radio value={0}>男</Radio>
            <Radio value={1}>女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="手机号" name="phone"
                   rules={[{ type: 'string' }, { required: true }, {
                     validator (rule, value) {
                       if (!/^[0-9]/.test(value)) {
                         return Promise.reject('手机号必须是数字')
                       }
                       return Promise.resolve()
                     }
                   }]}>
          <Input/>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">保存</Button>
        </Form.Item>
      </Form>
    )
  }
}

EditUserInfoForm.propTypes = {
  handleFinish: PropTypes.func.isRequired
}

export default EditUserInfoForm
